Control card size and layout with USWDS utilities. The card component works well with layout grid utilities. The usa-card-group block is functionally a wrap-able grid-row, and each individual usa-card is a grid-col. This means you can use a grid utility like tablet:grid-col-4 to set a four-column size on a card at tablet width. You can also set custom grid gaps on a usa-card-group using grid-gap utilities.
Since the Design System grid is based on flexbox, you can use flex positioning utilities on the card group. The default alignment is stretch (stretch aligns the top and bottom of each card in a row), but the flex-align-start utility can set the alignment to the top of the row.
|